<template>
    <div>
        <div class="container">
            <h2>name: {{ obj.name }} age: {{ obj.age }}</h2>
            <button @click="updateName">修改数据</button>

            <hr>

            <div> new obj

                <h1> {{ newObj.name }}---------{{ newObj.age }}</h1>

            </div>

            <hr>

            {{ name }}
        </div>

        <hr>

        {{ name }}--------{{ city }}
    </div>
</template>

<script>

import { reactive, toRef, toRefs } from 'vue'
export default {
    setup () {
        const obj = reactive({ name: 'zs', age: 11 })
        // const { name } = obj  // 普通的数据
        // ...obj,  // 普通对象
        // const newObj = { ...obj }  //   普通对象
        const updateName = () => {
            console.log('fn')
            obj.name = '李四';
            obj.age++
        }
        setTimeout(() => {
            console.log(obj);
        }, 3000)
        //   toRef 的基本使用 
        const name = toRef(obj, 'name')

        const newObj = toRefs(obj)


        const news = reactive({
            name: '中国新闻',
            city: '北京'
        })

        return {
            obj,
            updateName,
            name,
            newObj,
            ...toRefs(news) //简洁语法
        }

    }
}
</script>